import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { tw_mouth, tw_anal, mb_cycle, xl_cycle, tw_axillary, tw_ear, tw_forehead } from './tempChart'


class TableFoot extends Component {
    constructor(props) {
        super(props);
        this.state = {
            beginDate: this.props.beginDate, //开始时间
            sourceData: this.props.sourceData,


        }
    }


    //设置props值类型
    static propTypes = {
        beginDate: PropTypes.string.isRequired,
        sourceData: PropTypes.object,


    }

    //初始化默认值
    static defaultProps = {

        beginDate: '2017-06-26',
        sourceData: {}



    }

    componentWillReceiveProps(nextProps, nextState) {
        /*
         * 开始时间beginDate改变，则重新render
         * */
        if (nextProps.beginDate !== nextState.beginDate || nextProps.sourceData !== nextState.sourceData) {
            this.setState({
                beginDate: nextProps.beginDate, //开始时间
                sourceData: nextProps.sourceData


            })
        }
    }

    /*
     * @method getDaysArray 生成显示天数
     * @param {String} beginDate 开始时间
     * */
    getDaysArray = (beginDate) => {
        const showDays = 7;
        //根据当前日期和显示天数生成日期数组
        let daysArray = [];
        for (let i = 0; i < showDays; i++) {
            let newDate = this.getNewDate(beginDate, i);
            daysArray.push(newDate);
        }
        return daysArray;
    }


    /**
     * @method getNewDate 根据传入时间，获取新的时间
     * @param {Object} dateStr 传入时间
     * @param {Number} dis 改变规则 ，-1为前一天，1为后一天，依次类推
     */
    getNewDate(dateStr, dis) {
        //判断是否Date()对象，如果不是转为Date对象
        let newDate;
        if (dateStr instanceof Date) {
            newDate = dateStr;
        } else {
            //将字符串时间转化成Date对象
            newDate = new Date(dateStr.replace(/-/g, "/"));
        }

        let type = dis || 0;
        //判断是否是合法的时间对象
        let dateParse = Date.parse(newDate);
        if (isNaN(dateParse)) { //日期是否合法
            console.log("日期格式不合法");
            return; //不合法时返回false
        }
        let year = newDate.getFullYear();
        let month = newDate.getMonth();
        let day = newDate.getDate();
        let finalDate = new Date(year, month, day + type);
        let finalYear = finalDate.getFullYear();
        let finalMonth = finalDate.getMonth() < 9 ? "0" + (finalDate.getMonth() + 1) : (finalDate.getMonth() + 1);
        let finalDay = finalDate.getDate() < 10 ? "0" + finalDate.getDate() : finalDate.getDate();
        return finalYear + "-" + finalMonth + "-" + finalDay;
    }


    /*
     * @method getHxTimesAndDatas 生成每天的时刻 2-6-10-14-18-22
     * */
    getHxTimesAndDatas = (hxArrs, daysArray) => {
        let hxObj = {}

        for (let i = 0; i < hxArrs.length; i++) {
            let isBlow = i % 2 === 1;

            let myValue = {
                isBlow: isBlow,
                value: hxArrs[i].value
            }
            hxObj[hxArrs[i].dataTime] = myValue;
        }

        let timeArr = ['02:00:00', '06:00:00', '10:00:00', '14:00:00', '18:00:00', '22:00:00',]

        let timesArray = [];
        for (let i = 0; i < 42; i++) {

            let dayStr = daysArray[parseInt(i / 6)];
            let timeStr = timeArr[parseInt(i % 6)];
            let keyStr = dayStr + " " + timeStr;

            let myValue = hxObj[keyStr] ? hxObj[keyStr] : {}
            let shouValue = myValue.value;

            let class_name = myValue.isBlow ? "bottom" : "top"

            let td;
            let num = 2 + (i % 6) * 4;
            if (num === 22) {
                td = <td key={i} className='borderR' style={{ verticalAlign: class_name, color: 'red' }}>{shouValue}</td>;
            } else {
                td = <td key={i} style={{ verticalAlign: class_name, color: 'red' }}>{shouValue}</td>;
            }
            timesArray.push(td);
        }
        return timesArray;
    }

    /**
     * @method _daysMapData 格式化--日期对应的数据
     * @param {*array} daysArray 日期数组
     * @param {*array} sourceD 数据源
     */
    _daysMapData(daysArray, sourceD) {

        let tempObj = {};

        for (let i = 0; i < sourceD.length; i++) {
            // const element = sourceD[i].date;
            tempObj[sourceD[i].date] = sourceD[i].value
        }

        let resultArr = []
        for (let i = 0; i < daysArray.length; i++) {

            let keyS = daysArray[i];
            let value = tempObj[keyS];
            resultArr.push({
                key: keyS,
                value: value,
            })
        }
        return resultArr;
    }

    _shitStr(valueS) {
        if (valueS === '大便失禁' || valueS === '尿失禁') {
            return '※';
        } else if (valueS === "人工肛门") {
            return '☆';
        }
        else {
            return valueS;
        }

    }

    /**
     * @method _daysMapBlood 处理血压
     * @param {*array} daysArray 日期数组
     * @param {*array} sourceD 数据源
     */
    _daysMapBlood(daysArray, sourceD) {

        let tempObj = {};

        for (let i = 0; i < sourceD.length; i++) {
            if (!tempObj[sourceD[i].date]) {
                tempObj[sourceD[i].date] = [];
            }

            tempObj[sourceD[i].date].push(sourceD[i].value);
        }

        let resultArr = []
        for (let i = 0; i < daysArray.length; i++) {

            let keyS = daysArray[i];
            let value = tempObj[keyS] ? tempObj[keyS] : [];
            resultArr.push({
                key: keyS,
                value: value,
            })
        }
        return resultArr;

    }




    render() {

        let { beginDate, sourceData = {} } = this.state;
        let { hx = [], blood = [], rl = [], cl = [], bigShit = [], smallUrine = [], height = [], weight = [] } = sourceData
        let daysArray = this.getDaysArray(beginDate);
        let timesArray = this.getHxTimesAndDatas(hx, daysArray);

        return (
            <tbody>

                <tr id="timeTr" style={{ height: 40 }}>
                    <td>呼吸(次/分)</td>
                    {timesArray.map((v, i) => {
                        return v
                    })}
                    <td />
                </tr>
                {
                    // 如果入量出量没有数据就不显示
                    rl.length > 0 ? <tr id="dateTR">
                        <td>入量(ml)</td>
                        {this._daysMapData(daysArray, rl).map((v, i) => {
                            return <td key={i} colSpan={6} className="borderR">{v.value}</td>
                        })}
                        <td />
                    </tr> : null
                }
                {
                    // 如果入量出量没有数据就不显示
                    cl.length > 0 ? <tr id="dateTR">
                        <td>出量(ml)</td>
                        {this._daysMapData(daysArray, cl).map((v, i) => {
                            return <td key={i} colSpan={6} className="borderR">{v.value}</td>
                        })}
                        <td />
                    </tr> : null
                }

                <tr id="dateTR">
                    <td>大便(次/日)</td>
                    {/* bigShit */}
                    {this._daysMapData(daysArray, bigShit).map((v, i) => {
                        return <td key={i} colSpan={6} className="borderR">{this._shitStr(v.value)}</td>
                    })}
                    <td />
                </tr>
                <tr id="dateTR">
                    <td>小便(次/日)</td>
                    {this._daysMapData(daysArray, smallUrine).map((v, i) => {
                        return <td key={i} colSpan={6} className="borderR">{this._shitStr(v.value)}</td>
                    })}
                    <td />
                </tr>


                <tr id="dateTR">
                    <td>体重(kg)</td>
                    {this._daysMapData(daysArray, weight).map((v, i) => {
                        return <td key={i} colSpan={6} className="borderR">{v.value}</td>
                    })}
                    <td />
                </tr>
                <tr id="dateTR">
                    <td>身高(cm)</td>
                    {this._daysMapData(daysArray, height).map((v, i) => {
                        return <td key={i} colSpan={6} className="borderR">{v.value}</td>
                    })}
                    <td />
                </tr>

                <tr id="dateTR">
                    <td>血压(mmHg)</td>

                    {this._daysMapBlood(daysArray, blood).map((v, i) => {
                        {/* console.log(v); */ }
                        let valueArr = v.value;
                        return <td key={i + 'xueyta'} colSpan={6} className="borderR paddingZelo" style={{ height: 40 }}>

                            <div style={{ float: "left", width: '100%', height: '50%', }}>
                                <div style={{ float: "left", width: '49%', height: 20, borderRight: '1px solid #BFBFBF', borderBottom: '1px solid #BFBFBF' }}>
                                    <font className="xuyaaa">{valueArr[0]}</font>
                                </div>
                                <div style={{ float: "left", width: '49%', height: 20, borderBottom: '1px solid #BFBFBF' }}>
                                    <font className="xuyaaa">{valueArr[1]}</font>
                                </div>
                            </div>
                            <div style={{ float: "left", width: '100%', height: '50%', }}>
                                <div style={{ float: "left", width: '49%', height: 20, borderRight: '1px solid #BFBFBF', }}>
                                    <font className="xuyaaa">{valueArr[2]}</font>
                                </div>
                                <div style={{ float: "left", width: '49%', height: 20, }}>
                                    <font className="xuyaaa">{valueArr[3]}</font>
                                </div>
                            </div>
                        </td>
                    })}
                    <td />
                </tr>

                <tr id="dateTR">
                    <td>其他</td>
                    {daysArray.map((v, i) => {
                        return <td key={i} colSpan={6} >{}</td>
                    })}
                    <td />
                </tr>

                <tr id="dateTR">
                    <td style={{ textAlign: 'left' }} colSpan="45" >
                        说明：体温（口温<span>
                            <svg width={10} height={10} >
                                {tw_mouth({ x: 5, y: 5 }, '')}
                            </svg>
                        </span>，腋温<span>
                            <svg width={10} height={10} >
                                {tw_axillary({ x: 5, y: 5 })}
                            </svg>
                        </span>，肛腽<span>
                            <svg width={10} height={10} >
                                {tw_anal({ x: 5, y: 5 }, '')}
                            </svg>
                        </span>，耳温<span>
                            <svg width={10} height={10} >
                                {tw_ear({ x: 5, y: 5 }, '')}
                            </svg>
                        </span>，额温<span>
                            <svg width={10} height={10} >
                                {tw_forehead({ x: 5, y: 5 }, '')}
                            </svg>
                        </span>）、脉搏<span>
                            <svg width={10} height={10} >
                                {mb_cycle({ x: 5, y: 5 }, '')}
                            </svg>
                        </span>、心率<span>
                            <svg width={10} height={10} >
                                {xl_cycle({ x: 5, y: 5 }, '')}
                            </svg>
                        </span>

                    </td>

                </tr>









            </tbody>
        );
    }
}

export default TableFoot;